/* ---------------------------------------------------------------------------------- */
/* Default styles */
/* ---------------------------------------------------------------------------------- */
body {
	font-family: Arial;
	margin: 0px;
}

strong {
	font-weight: bold;
}

h1,h2,h3,h4 {
	font-weight: bold;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.2em;
}

img {
	border: none;
	vertical-align: middle;
}

.spacer {
	clear: both;
}

.hidden {
	text-indent: -3000px;
	display: none;
}

/* ---------------------------------------------------------------------------------- */
/* Link styles */
/* ---------------------------------------------------------------------------------- */
a {
	color: rgb(245, 102, 0);
	text-decoration: none;
}

a:hover {
	color: rgb(245, 102, 0);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------------- */
/* application layout */
/* ---------------------------------------------------------------------------------- */
.site {
	background: #FFFFFF none repeat scroll 0%;
	border: 0pt none;
	font-size: 90%;
	margin: 5px;
	padding: 0pt;
	width: 64em;
	margin-right: auto;
	margin-left: auto;
}
/* header container */
.site .containerHeader {
	width: 100%;
}

/* content container */
.site .contentContainer {
	clear: both;
	width: 100%;
	position: relative;
	padding-top: 10px;
}

/* footer container */
.site .containerFooter {
	clear: both;
	width: 100%;
	border-top: 2px solid rgb(245, 102, 0);
}

/* ---------------------------------------------------------------------------------- */
/* Header styles */
/* ---------------------------------------------------------------------------------- */
.header {
	background-image: url(../images/logoOrange.gif);
	background-repeat: no-repeat;
	background-position: left center;
	height: 70px;
	float: left;
	/* 99% because 100% gives horizontal scrollbar */
	width: 99%;
}

.header h1 {
	color: #ccc;
	padding-left: 160px;
	padding-top: 20px;
}

/* ---------------------------------------------------------------------------------- */
/* Content styles */
/* ---------------------------------------------------------------------------------- */
.content {
	position: relative;
	width: 100%;
	text-align: left;
	margin-bottom: 1em;
}

.content h2 {
	background-image: url(../images/gradingGrey.png);
	background-repeat: repeat-x;
	padding: 10px 0px 5px 9px;
	color: #444;
}

.content p {
	text-indent: 1em;
}

/* new content block */
.block {
	margin: 1em auto 1em auto;
	text-align: left;
	width: 80%;
	clear: both;
}

.block h3 {
	padding-left: 5px;
	padding-top: 3px;
	height: 1.5em;
	background-color: transparent;
	font-weight: normal;
	text-indent: 8px;
}

.center {
	clear: both;
	margin: 0.5em auto 0em auto;
	text-align: center;
}

.errors {
	color: #f00;
}

/**
 formHeader, formLeft, formBody, formFooter,formFooter, formFooterLeft
 are used to create frames  with header, content and footer parts, with round corners.

Example :

<div class="formHeader">
   <div class="formLeft">text</div>
</div>
<div class="formBody">
     text
</div>
<div class="formFooterLeft">
  <div class="formFooter">text</div>
</div>

with orange color :

<div class="formHeader orangeHeader">
   <div class="formLeft">text</div>
</div>
<div class="formBody orangeBody">
     text
</div>
<div class="formFooterLeft orangeFooter">
  <div class="formFooter">text</div>
</div>

*/
.formHeader {
	background-image: url(../images/formHeader.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #f6f6f6;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding-right: 5px;
}

.formBody h3,.formBody h4 {
	text-indent: 12px;
	padding-top: 8px;
}

.formHeader .center {
	margin: 0em auto 0em auto;
}

.formHeader label {
	margin-top: 0em;
	margin-bottom: 0em;
	float: none;
	font-size: 1.1em;
	font-weight: bold;
}

.formHeaderLang {
	float: right;
}

#spanVersionLangEn a {
	background: url(../images/arrow_pointer_se.gif) no-repeat left 0.60em;
	padding-left: 10px;
}

.formLeft {
	background-image: url(../images/formLeft.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	text-indent: 8px;
}

.formBody {
	background-color: #fff;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.formBody .center {
	margin: 0em auto 0em auto;
}

.formFooter {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	height: 15px;
}

.formFooterLeft {
	background-image: url(../images/formFooterLeft.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #fff;
	border-right: 1px solid #ccc;
	padding-left: 5px;
}

.formFooterLeft .center {
	margin: 0em auto 0em auto;
}

.formBody p {
	padding: 0.3em;
}

.formHelper p {
	padding: 0.3em;
}

/* ---------------------------------------------------------------------*/
/* Form styles */
/* ---------------------------------------------------------------------*/
.input {
	padding: 0.5em;
}

.required label span {
	font-weight: bold;
	color: #f00;
	padding: 3px;
}

.nota span {
	font-weight: bold;
	color: #f00;
}

label {
	display: block;
	float: left;
	width: 10em;
	padding: 0.2em 0.3em;
	clear: both;
}

.button {
	background-image: url(../images/buttonBg.gif);
	background-repeat: no-repeat;
	background-position: center center;
	border: none;
	background-color: rgb(245, 102, 0);
	color: #fff;
	text-indent: 0px;
	width: 6.8em;
	min-width: 6.8em;
	height: 26px;
	min-height: 26px;
	cursor: pointer;
	font-weight: bold;
}

/* ---------------------------------------------------------------------*/
/* footer style */
/* ---------------------------------------------------------------------*/
.footer {
	margin: 10px;
}

.footer .copy {
	background-image: url(../images/logoOrange_small.gif);
	background-repeat: no-repeat;
	background-position: left center;
	float: left;
	text-indent: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: left;
	width: auto;
}

.footer .user {
	float: left;
	width: auto;
	padding-left: 90px;
	padding-top: 15px;
	text-align: left;
}

.footer .version {
	padding-top: 10px;
	text-align: left;
	padding-top: 15px;
	float: right;
	width: auto;
}

div.globalFeedback ul {
	border-top: #F60 solid 1px;
	border-bottom: #F60 solid 1px;
}

li.feedbackPanelINFO {
	background: url("../images/valide.gif") no-repeat;
	background-position: 10px 3px;
	min-height: 65px;
	line-height: 20px;
	padding-left: 75px;
	vertical-align: middle;
}

li.feedbackPanelWARNING {
	background: url("../images/warning_logo.jpg") no-repeat;
	background-position: 10px 3px;
	min-height: 65px;
	line-height: 20px;
	padding-left: 75px;
	vertical-align: middle;
}

li.feedbackPanelERROR {
	background: url("../images/error_logo.png") no-repeat;
	background-position: 10px 3px;
	min-height: 65px;
	line-height: 20px;
	padding-left: 75px;
	vertical-align: middle;
}

span.feedbackPanelINFO {
	color: black;
}

span.feedbackPanelWARNING {
	color: #F60;
}

span.feedbackPanelERROR {
	color: red;
}

.feedbackPanelTextField span.feedbackPanelERROR {
	background: url("../images/requiredField_error.png") no-repeat left
		center;
	/*background-repeat: no-repeat;*/
	padding-left: 20px;
	color: red;
	white-space: nowrap;
}

.errorField {
	border: 1px solid red;
}